<template>
  <div>
    <el-card
      shadow="always"
      style="margin: 2px 5px"
      :body-style="{
        padding: '20px',
        height: 'calc(100vh - 170px)',
        'overflow-y': 'auto',
      }"
    >
      <template #header>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <span class="card-title"
              >【{{ selectedMailConf.name }}】邮件配置信息</span
            >
          </el-col>
          <el-col :span="12" :offset="0">
            <div style="float: right">
              <span style="font-weight: bold"> 选择要使用的邮件配置模板：</span>
              <el-select v-model="selectedMailConf" value-key="id" filterable>
                <el-option
                  v-for="mailConf in sunnyMailConfList"
                  :key="mailConf.id"
                  :label="mailConf.name"
                  :value="mailConf"
                >
                  <template #default>
                    <el-row>
                      <el-col :span="20" :offset="0">
                        <span> {{ mailConf.name }} </span></el-col
                      >
                      <el-col :span="4" :offset="0">
                        <el-button
                          style="padding: 5px"
                          type="danger"
                          :disabled="mailConf === selectedMailConf"
                          size="default"
                          :icon="Delete"
                          @click.stop="deleteMailConf(mailConf)"
                        ></el-button>
                      </el-col>
                    </el-row>
                  </template>
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </template>

      <el-row>
        <el-col :span="20" :offset="2">
          <el-steps :active="nowStep" finish-status="success" align-center>
            <el-step title="邮件服务配置" :icon="Edit" @click="nowStep = 0" />
            <el-step
              title="邮件内容配置"
              :icon="Message"
              @click="nowStep = 1"
            />
            <el-step
              title="邮件发送配置"
              :icon="Promotion"
              @click="nowStep = 2"
            /> </el-steps
        ></el-col>
      </el-row>

      <MailServer v-if="nowStep === 0"></MailServer>
      <MailContent v-if="nowStep === 1"></MailContent>
      <MailSend v-if="nowStep === 2" @refresh-list="listMailConf"></MailSend>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { deleteSunnyMailConfApi, listSunnyMailConfApi } from "@/api/sunnymail";
import type { SunnyMailConf } from "@/types/sunnyMailConf/type";
import { ref, onMounted } from "vue";
import { Delete, Edit, Message, Promotion } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import MailServer from "./MailServer.vue";
import MailContent from "./MailContent.vue";
import MailSend from "./MailSend.vue";

import { useMailConfStore } from "@/stores/mailConfStore";
import { storeToRefs } from "pinia";
const mailConfStore = useMailConfStore();
const { selectedMailConf, nowStep } = storeToRefs(mailConfStore);

const sunnyMailConfList = ref<SunnyMailConf[]>([]);

onMounted(() => {
  listMailConf();
});

function listMailConf() {
  listSunnyMailConfApi().then(({ data }) => {
    sunnyMailConfList.value = data;
  });
}

function deleteMailConf(mailConf: SunnyMailConf) {
  ElMessageBox.confirm(`确认要删除【${mailConf.name}】邮件配置吗？`)
    .then(() => {
      deleteSunnyMailConfApi(mailConf.id).then(() => {
        ElMessage.success(`已删除【${mailConf.name}】邮件配置`);
        listMailConf();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
}
</script>

<style scoped></style>
